<template>
  <div class="theme-toggle">
    <el-switch
      v-model="isDarkMode"
      active-text="深色"
      inactive-text="浅色"
      @change="toggleTheme"
      size="small"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useTheme } from '@/utils/theme.js';

// 使用主题管理工具
const { isDarkMode: getIsDarkMode, toggleTheme: toggleThemeAction } = useTheme();

// 当前主题状态
const isDarkMode = ref(false);

// 初始化
onMounted(() => {
  isDarkMode.value = getIsDarkMode();
});

// 切换主题
const toggleTheme = () => {
  const newTheme = toggleThemeAction();
  isDarkMode.value = newTheme;
};
</script>

<style scoped>
.theme-toggle {
  display: inline-flex;
  align-items: center;
}
</style>
